<!DOCTYPE>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>compoment v2</title>

    <script type="text/javascript" src="../static/js/jquery.js"></script>

    <link rel="stylesheet" type="text/css" href="index.css">
    <script type="text/javascript" src="index.js"></script>

</head>
<body>

    <div id="first-container">
        <div class="menu">
            <div class="menu-title">
                <h3>选项类型1</h3>
            </div>
            <div class="menu-body">
                <span class="menu-item" id="1">COMPONENT测试1</span>
                <span class="menu-item" id="2">COMPONENT测试2</span>
                <span class="menu-item" id="3">COMPONENT测试3</span>
                <span class="menu-item" id="4">COMPONENT测试4</span>
                <span class="menu-item" id="5">COMPONENT测试5</span>
            </div>
        </div>

        <div class="menu">
            <div class="menu-title">
                <h3>选项类型2</h3>
            </div>
            <div class="menu-body">
                <select class="result-item" onchange="handleClickMenuItem($(this).find('option:selected').attr('id'), this.value)">
                    <option class="result-item" id="6">COMPONENT测试6</option>
                    <option class="result-item" id="7">COMPONENT测试7</option>
                    <option class="result-item" id="8">COMPONENT测试8</option>
                    <option class="result-item" id="9">COMPONENT测试9</option>
                    <option class="result-item" id="10">COMPONENT测试10</option>
                </select>
            </div>
        </div>

        <div class="menu">
            <div class="menu-title">
                <h3>选项类型3</h3>
            </div>
            <div class="menu-body">
                <sapn class="result-item">COMPONENT测试11<input type="checkbox" value="COMPONENT测试11" id="11"></sapn>
                <sapn class="result-item">COMPONENT测试12<input type="checkbox" value="COMPONENT测试12" id="12"></sapn>
                <span class="result-item">COMPONENT测试13<input type="checkbox" value="COMPONENT测试13" id="13"></span>
                <span class="result-item">COMPONENT测试14<input type="checkbox" value="COMPONENT测试14" id="14"></span>
                <span class="result-item">COMPONENT测试15<input type="checkbox" value="COMPONENT测试15" id="15"></span>
            </div>
        </div>

        <div class="menu">
            <div class="menu-title">
                <h3>选项类型4</h3>
            </div>
            <div class="menu-body">
                <input type="text" id="16" class="result-item">
                <span class="result-item" onclick="handleClickMenuItem(16, $('#16').val())">确定</span>
            </div>
        </div>

        <div class="menu">
            <div class="menu-title" style="position: relative">
                <div onclick="handleClickReset()" style="cursor: pointer;background-color: #888888;position: absolute;top: 10px;right: 10px;color: #FFF;border-radius: 3px;font-size: 18px;padding: 4px">重置</div>
                <h3>结果</h3>
            </div>
            <div class="menu-body" id="result-body">
            </div>
        </div>

        <div class="menu">
            <div class="menu-title">
                <h3>拼接结果展示</h3>
            </div>
            <div class="menu-body">
                <input type="button" onclick="seeResult()" value="查看">
                <div>
                    <b>key：</b>
                    <div id="result-key"></div>
                </div>
                <div>
                    <b>value：</b>
                    <div id="result-value"></div>
                </div>
            </div>
        </div>
    </div>

</body>
<script>

    // 选项类型3
    $(".menu-body :checkbox").click(function () {
        if ($(this).is(':checked')) {
            handleClickMenuItem(this.id, this.value)
        }
    })

</script>
</html>
